<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-select v-model="form.supplier_id" filterable remote placeholder="输入搜索的工厂名称" size="small"
                               :remote-method="searchFactoryBtn" :loading="searchLoading" clearable :disabled="user.source_from=='gc'">
                        <el-option v-for="(item,index) in factoryList" :label="item.factory_name" :value="item.supplier_id" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="form.recon_time" type="month" value-format="yyyy-MM" placeholder="对账月份" style="width: 140px" size="small" clearable>
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select size="small" v-model="form.status" style="width: 120px" placeholder="对账单状态" clearable>
                        <el-option :value=0 label="待审核"></el-option>
                        <el-option :value=1 label="已通过"></el-option>
                        <el-option :value=2 label="未通过"></el-option>
                        <el-option :value=3 label="已作废"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-popover placement="bottom" width="450" trigger="click">
                        <el-form label-width="90px" label-position="left">
                            <el-form-item label="推送金蝶">
                                <el-select size="small" v-model="form.is_push" style="width: 80%" placeholder="推送状态" clearable>
                                    <el-option :value=0 label="未推送"></el-option>
                                    <el-option :value=1 label="已推送"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="是否付款">
                                <el-select size="small" v-model="form.pay_status" style="width: 80%" placeholder="付款状态" clearable>
                                    <el-option :value=0 label="未付款"></el-option>
                                    <el-option :value=1 label="已付款"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="品牌类型">
                                <el-select size="small" v-model="form.source_factory_groups_id" style="width: 80%" placeholder="选择品牌" clearable>
                                    <el-option value="3090235" label="十三余"></el-option>
                                    <el-option value="10010" label="有香"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <el-button slot="reference" size="small" type="warning" plain>更多</el-button>
                    </el-popover>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">&nbsp;查询</el-button>
                    <el-button v-if="user.source_from=='fs'" type="warning" class="el-icon-plus" @click="addBtn" size="small" :loading="btnLoading">&nbsp;创建对账单</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini">
                <el-table-column label="品牌" prop="brand_name" width="80px"></el-table-column>
                <el-table-column label="对账日期" prop="recon_time" width="100px"></el-table-column>
                <el-table-column label="绣花厂" prop="factory_name" show-overflow-tooltip></el-table-column>
                <el-table-column label="创建人" prop="adduser" width="100px"></el-table-column>
                <el-table-column label="创建时间" prop="createtime" width="135px"></el-table-column>
                <el-table-column label="应付金额" prop="pay_amount"></el-table-column>
                <el-table-column label="对账单状态" prop="status">
                    <template slot-scope="{row}">
                        <el-tag size="mini" v-if="row.status==0">待审核</el-tag>
                        <el-tag size="mini" type="success" v-else-if="row.status==1">已通过</el-tag>
                        <el-tag size="mini" type="danger" v-else-if="row.status==2">未通过</el-tag>
                        <el-tag size="mini" type="info" v-else-if="row.status==3">已作废</el-tag>
                        <el-tag size="mini" type="info" v-else>{{row.status}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="推送金蝶" prop="is_push">
                    <template slot-scope="{row}">
                        <el-tag size="mini" type="info" v-if="row.is_push==0">未推送</el-tag>
                        <el-tag size="mini" type="success" v-else-if="row.is_push==1">已推送</el-tag>
                        <el-tag size="mini" type="info" v-else>{{row.is_push}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="付款状态" prop="pay_status">
                    <template slot-scope="{row}">
                        <el-tag size="mini" type="info" v-if="row.pay_status==0">未付款</el-tag>
                        <el-tag size="mini" type="success" v-else-if="row.pay_status==1">已付款</el-tag>
                        <el-tag size="mini" type="info" v-else>{{row.pay_status}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="付款凭证" prop="pay_images" width="100px">
                    <template slot-scope="{row}">
                        <el-image v-if="row.pay_images.length>0" :src="row.pay_images[0]" style="width: 30px;" fit="fill" :preview-src-list="row.pay_images"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" v-if="user.source_from=='fs'">
                    <template slot-scope="{row}">
                        <el-button type="text" size="mini" class="el-icon-document" @click="detailBtn(row.id)" :disabled="!(row.data_status==1)">&nbsp;详情</el-button>
                        &nbsp;
                        <el-dropdown trigger="hover" style="font-size: 12px;" @command="dropdownBtn($event, row)">
                            <span style="cursor: pointer;color: #409EFF;">
                                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="EDIT" icon="el-icon-edit"
                                                  :disabled="!(row.data_status==0 && row.status==0 && nodeActions.includes('edit'))">编 辑</el-dropdown-item>
                                <el-dropdown-item command="CHECK" icon="el-icon-document-checked"
                                                  :disabled="!(row.data_status==1 && row.status==0 && nodeActions.includes('check'))">审 核</el-dropdown-item>
                                <el-dropdown-item command="PAY" icon="el-icon-shopping-cart-1"
                                                  :disabled="!(row.status==1 && row.pay_status==0 && nodeActions.includes('pay'))">付 款</el-dropdown-item>
                                <el-dropdown-item command="PUSH" icon="el-icon-position"
                                                  :disabled="!(row.status==1 && row.is_push==0 && nodeActions.includes('push'))">推 送</el-dropdown-item>
                                <el-dropdown-item command="CANCEL" icon="el-icon-delete" :disabled="!(row.status==0 || nodeActions.includes('cancel'))">作 废</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80" v-else>
                    <template slot-scope="{row}">
                        <el-button type="text" size="mini" class="el-icon-document" @click="detailBtn(row.id)" :disabled="!(row.data_status==1)">&nbsp;详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--付款凭证-->
        <el-dialog title="付款凭证" :visible.sync="payVisible" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="closeBtn" width="550px">
            <el-row>
                <el-upload action="/api/tool/fileImport" list-type="picture-card"
                           :headers="uploadHeaders"
                           :data="uploadData"
                           :file-list="payImages"
                           :on-success="(res, file, fileList)=>uploadSuccessHandle(res, fileList)"
                           :before-upload="beforeUploadHandle">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" />
                        <span class="el-upload-list__item-actions">
<!--                        <span class="el-upload-list__item-preview" @click="previewImgBtn(file)">-->
                            <!--                          <i class="el-icon-zoom-in"></i>-->
                            <!--                        </span>-->
                        <span class="el-upload-list__item-delete" @click="delImgBtn(file)">
                          <i class="el-icon-delete"></i>
                        </span>
                    </span>
                    </div>
                </el-upload>
            </el-row>
            <div slot="footer">
                <el-button @click="closeBtn" size="small" plain>退 出</el-button>
                <el-button type="primary" size="small" :loading="saveLoading" :disabled="payImages.length==0" @click="submitPayImagesBtn">确认</el-button>
            </div>
        </el-dialog>

        <!--审核-->
        <el-dialog title="审核" :visible.sync="checkVisible" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="closeBtn" width="550px">
            <el-row>
                <el-radio v-model="checkStatus" :label=1>审核通过</el-radio>
                <el-radio v-model="checkStatus" :label=2>审核不通过</el-radio>
            </el-row>
            <div slot="footer">
                <el-button @click="closeBtn" size="small" plain>退 出</el-button>
                <el-button type="primary" size="small" :loading="saveLoading" @click="submitCheckBtn">确认</el-button>
            </div>
        </el-dialog>

        <!--详情-->
        <el-drawer :title="detail.factory_name+' '+detail.recon_time" :visible.sync="detailVisible" size="1200px" :before-close="closeBtn" direction="rtl" :wrapperClosable="false">
            <el-row style="padding-left: 20px;padding-bottom:20px;overflow-y:auto;" :style="{'height': drawHeight}">
                <div style="margin-top: 0px;">
                    <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="16" height="16"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                    <span style="font-size: 16px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">回货统计单</span>
                    <div style="display: inline-block;float: right">
                        <span style="font-size: 13px;font-weight: bold">回货总金额：<span style="color: #ff7171">{{detail.purchasein_amount}}</span></span>
                        &nbsp;&nbsp;&nbsp;
                        <span style="font-size: 13px;font-weight: bold">回货总数量：<span style="color: #67C23A;">{{detail.purchasein_num}}</span></span>
                        &nbsp;&nbsp;&nbsp;
                    </div>
                </div>
                <el-table :data="detail.list" size="mini" border :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
                          max-height="400px" style="width: 99%;">
                    <el-table-column label="生产加工单" prop="processing_code"></el-table-column>
                    <el-table-column label="合同号" prop="factory_contract_no" width="145"></el-table-column>
                    <el-table-column label="采购单号" prop="po_id"></el-table-column>
                    <el-table-column label="款号" prop="type_no"></el-table-column>
                    <el-table-column label="款名" prop="type_name"></el-table-column>
                    <el-table-column label="大货绣花成本加价总价(含税)" prop="contract_machining_price"></el-table-column>
                    <el-table-column label="实付绣花成本加价总价(含税)" prop="pay_machining_price"></el-table-column>
                    <el-table-column label="数量" prop="totalnum" width="100"></el-table-column>
                    <el-table-column label="货款金额(含税)" prop="total_cost_amount"></el-table-column>
                    <el-table-column label="开票金额" prop="emb_billing_amount"></el-table-column>
                </el-table>
                <div style="margin-top: 20px;">
                    <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="16" height="16"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                    <span style="font-size: 16px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">额外费用</span>
                </div>
                <el-table :data="detail.additional_list" size="mini" border :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
                          max-height="400px" style="width: 99%;">
                    <el-table-column label="合同号" prop="factory_contract_no"></el-table-column>
                    <el-table-column label="加工单号" prop="processing_code"></el-table-column>
                    <el-table-column label="款号" prop="type_no"></el-table-column>
                    <el-table-column label="款名" prop="type_name"></el-table-column>
                    <el-table-column label="用途" prop="purpose"></el-table-column>
                    <el-table-column label="单价" prop="price"></el-table-column>
                    <el-table-column label="税额" prop="tax_rate_price"></el-table-column>
                    <el-table-column label="数量" prop="num"></el-table-column>
                    <el-table-column label="总价" prop="amount"></el-table-column>
                    <el-table-column label="备注" prop="remarks"></el-table-column>
                </el-table>
                <div style="margin-top: 20px;">
                    <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="16" height="16"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                    <span style="font-size: 16px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">违约赔偿</span>
                </div>
                <el-table :data="detail.fine_list" size="mini" border :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
                          max-height="400px" style="width: 99%;">
                    <el-table-column label="合同号" prop="factory_contract_no"></el-table-column>
                    <el-table-column label="加工单号" prop="processing_code"></el-table-column>
                    <el-table-column label="款号" prop="type_no"></el-table-column>
                    <el-table-column label="款名" prop="type_name"></el-table-column>
                    <el-table-column label="违约赔偿" prop="amount"></el-table-column>
                    <el-table-column label="赔偿事由" prop="reason"></el-table-column>
                    <el-table-column label="备注" prop="remarks"></el-table-column>
                    <el-table-column label="赔偿申请日期" prop="createtime"></el-table-column>
                </el-table>
                <div style="margin-top: 20px;">
                    <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="16" height="16"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                    <span style="font-size: 16px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">对账信息汇总</span>
                </div>
                <el-table :data="detail.info" size="mini" border :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
                          max-height="400px" style="width: 99%;">
                    <el-table-column label="货款金额" align="center" prop="purchasein_amount"></el-table-column>
                    <el-table-column label="额外费用" align="center" prop="additional_amount"></el-table-column>
                    <el-table-column label="违约赔偿" align="center" prop="fine_amount"></el-table-column>
                    <el-table-column label="总开票金额" align="center" prop="kaip_amount"></el-table-column>
                    <el-table-column label="总应付金额" align="center" prop="pay_amount"></el-table-column>
                </el-table>
                <div style="margin-top: 20px;">
                    <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="16" height="16"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                    <span style="font-size: 16px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">工厂银行信息</span>
                </div>
                <el-table :data="detail.bank" size="mini" border :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
                          max-height="400px" style="width: 99%;">
                    <el-table-column label="公司抬头" prop="company_head"></el-table-column>
                    <el-table-column label="开户行" prop="bank_of_deposit"></el-table-column>
                    <el-table-column label="开户行号" prop="opening_bank_no"></el-table-column>
                    <el-table-column label="银行账户" prop="bank_account"></el-table-column>
                </el-table>
            </el-row>
            <div style="width: 100%;position: absolute;bottom: 10px;padding: 8px;border-top: 1px #ebeef5 solid;">
                <el-button type="primary" @click="downloadPdfBtn(detail.id)" plain>
                    <svg style="vertical-align: bottom;" t="1726624575172" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4612" width="16" height="16"><path d="M192 384h640a42.666667 42.666667 0 0 1 42.666667 42.666667v362.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H192v106.666667a21.333333 21.333333 0 0 0 21.333333 21.333333h725.333334a21.333333 21.333333 0 0 0 21.333333-21.333333V308.821333L949.909333 298.666667h-126.528A98.048 98.048 0 0 1 725.333333 200.618667V72.661333L716.714667 64H213.333333a21.333333 21.333333 0 0 0-21.333333 21.333333v298.666667zM128 832H42.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V426.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333V85.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h530.026667L1024 282.453333V938.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333v-106.666667zM88.469333 472.490667V746.666667h44.928v-105.216h67.968c66.816 0 100.224-28.416 100.224-84.864 0-56.064-33.408-84.096-99.456-84.096H88.469333z m44.928 38.4h65.28c19.584 0 34.176 3.456 43.392 10.752 9.216 6.912 14.208 18.432 14.208 34.944 0 16.512-4.608 28.416-13.824 35.712-9.216 6.912-23.808 10.752-43.776 10.752h-65.28v-92.16z m206.592-38.4V746.666667h100.224c44.544 0 77.952-12.288 100.992-36.864 21.888-23.424 33.024-56.832 33.024-100.224 0-43.776-11.136-77.184-33.024-100.224-23.04-24.576-56.448-36.864-100.992-36.864h-100.224z m44.928 38.4h46.848c34.176 0 59.136 7.68 74.88 23.424 15.36 15.36 23.04 40.704 23.04 75.264 0 33.792-7.68 58.752-23.04 74.88-15.744 15.744-40.704 23.808-74.88 23.808h-46.848v-197.376z m231.552-38.4V746.666667h44.928v-121.344h134.016v-38.4h-134.016v-76.032h142.08v-38.4h-187.008z" fill="#EA4318" p-id="4613"></path></svg>
                    导出PDF
                </el-button>
                <el-button type="primary" @click="downloadExcelBtn(detail.id)" plain>
                    <svg style="vertical-align: bottom;" t="1726296940186" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4414" width="16" height="16"><path d="M595.2 755.2h128v88.32L954.88 710.4 723.2 576v89.6h-128zM266.24 134.4c0-6.4 6.4-12.8 12.8-12.8H652.8c3.84 0 7.68 0 12.8 1.28v198.4H864c1.28 5.12 1.28 29.44 1.28 33.28v252.16l49.92 30.72v-281.6c0-34.56-20.48-102.4-43.52-126.72L760.32 117.76C736 93.44 688.64 74.24 654.08 74.24H279.04c-34.56 0-62.72 28.16-62.72 62.72V262.4h49.92v-128z m449.28 10.24c3.84 2.56 6.4 5.12 8.96 7.68l111.36 111.36c2.56 2.56 5.12 5.12 7.68 8.96h-128v-128z" fill="#22975D" p-id="4415"></path><path d="M595.2 385.28H800v58.88H595.2z m270.08 503.04c0 6.4-6.4 12.8-12.8 12.8H279.04c-6.4 0-12.8-6.4-12.8-12.8v-42.24h-49.92v42.24c0 34.56 28.16 62.72 62.72 62.72h574.72c34.56 0 62.72-28.16 62.72-62.72V783.36l-49.92 29.44v75.52zM537.6 320H69.12v468.48H537.6V320zM367.36 687.36l-64-94.72-28.16 43.52h28.16v52.48H160l104.96-153.6L172.8 396.8h76.8l55.04 80.64 55.04-80.64h76.8l-92.16 138.24 104.96 153.6h-81.92z m227.84-185.6H800v58.88H595.2z" fill="#22975D" p-id="4416"></path></svg>
                    导出Excel
                </el-button>
            </div>
        </el-drawer>

        <!--创建对账单-->
        <el-drawer :title="editTitle" :visible.sync="editVisible" size="1200px" direction="rtl" :wrapperClosable="false" :before-close="closeBtn">
            <el-row style="padding-left: 10px;padding-bottom:10px;">
                <el-tabs type="border-card" v-model="tab" style="width: 99%">
                    <el-form inline>
                        <el-form-item>
                            <el-select v-model="editForm.embroidery_factory_id" filterable remote placeholder="输入搜索的工厂名称" size="small" :remote-method="searchFactoryBtn"
                                       :loading="searchLoading" clearable @change="loopData" :disabled="!!reconciliation.id">
                                <el-option v-for="(item,index) in factoryList" :label="item.factory_name" :value="item.supplier_id" :key="index" ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker v-model="editForm.date" @change="loopData" type="month" value-format="yyyy-MM" placeholder="选择月份"
                                            style="width: 140px" size="small" :disabled="!!reconciliation.id">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-select size="small" v-model="editForm.brand_code" placeholder="品牌" style="width: 100px" @change="loopData" :disabled="!!reconciliation.id">
                                <el-option value="S" label="十三余"></el-option>
                                <el-option value="Y" label="有香如故"></el-option>
                                <el-option value="XM" label="一弦一木"></el-option>
                                <el-option value="J" label="锦瑟"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="!!reconciliation.id">
                            <el-button v-if="tab=='return'" type="primary" size="small" class="el-icon-refresh"
                                       @click="reselectBtn">&nbsp;重新选择</el-button>
                            <el-button v-else-if="tab=='additional' && reconciliation.additional_list.length>0" type="primary" size="small" class="el-icon-refresh"
                                       @click="reselectBtn">&nbsp;重新选择</el-button>
                            <el-button v-else-if="tab=='fine' && reconciliation.fine_list.length>0" type="primary" size="small" class="el-icon-refresh"
                                       @click="reselectBtn">&nbsp;重新选择</el-button>
                        </el-form-item>
                    </el-form>
                    <el-tab-pane label="选择生产加工单" name="return">
                        <el-table :data="returnList" size="mini" border :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
                                  style="width: 99%;" v-loading="returnLoading" :max-height="maxTableHeight" @selection-change="selectedChange">
                            <el-table-column type="selection" width="55" :selectable="selectable" v-if="reconciliation.list.length==0"></el-table-column>
                            <el-table-column label="生产加工单" prop="processing_code"></el-table-column>
                            <el-table-column label="采购通知单" prop="po_id" width="150"></el-table-column>
                            <el-table-column label="款号" prop="type_no" width="120"></el-table-column>
                            <el-table-column label="大货绣花成本加价总价(含税)" prop="contract_machining_price"></el-table-column>
                            <el-table-column label="实付绣花成本加价总价(含税)" prop="pay_machining_price"></el-table-column>
                            <el-table-column label="数量" prop="totalnum" width="80"></el-table-column>
                            <el-table-column label="审核状态" prop="status" width="90">
                                <template slot-scope="{ row }">
                                    <el-tag size="mini" type="info" v-if="row.status==0">未提交</el-tag>
                                    <el-tag size="mini" type="primary" v-else-if="row.status==1">提交待审</el-tag>
                                    <el-tag size="mini" type="success" v-else-if="row.status==2">审核通过</el-tag>
                                    <el-tag size="mini" type="danger" v-else-if="row.status==3">审核未通过</el-tag>
                                    <el-tag size="mini" type="info" v-else-if="row.status==4">取消作废</el-tag>
                                    <el-tag size="mini" type="info" v-else-if="row.status==5">已撤回</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="货款金额(含税)" prop="total_cost_amount" width="110"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="选择额外费用" name="additional" :disabled="!reconciliation.id">
                        <el-table :data="additionalList" size="mini" border :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
                                  style="width: 99%;" :max-height="maxTableHeight" v-loading="additionalLoading" @selection-change="selectedChange">
                            <el-table-column type="selection" width="55" v-if="reconciliation.additional_list.length==0"></el-table-column>
                            <el-table-column label="id" prop="id" width="80"></el-table-column>
                            <el-table-column label="合同号" prop="factory_contract_no" width="170"></el-table-column>
                            <el-table-column label="款号" prop="type_no" width="120"></el-table-column>
                            <el-table-column label="品名" prop="type_name" show-overflow-tooltip></el-table-column>
                            <el-table-column label="用途" prop="purpose"></el-table-column>
                            <el-table-column label="单价" prop="price" width="80"></el-table-column>
                            <el-table-column label="数量" prop="num" width="80"></el-table-column>
                            <el-table-column label="总价" prop="amount" width="100"></el-table-column>
                            <el-table-column label="备注" prop="remarks" width="140" show-overflow-tooltip></el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="选择违约赔偿" name="fine"  :disabled="!reconciliation.id">
                        <el-table :data="fineList" size="mini" border :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
                                  style="width: 99%;" :max-height="maxTableHeight" v-loading="fineLoading" @selection-change="selectedChange">
                            <el-table-column type="selection" width="55" v-if="reconciliation.fine_list.length==0"></el-table-column>
                            <el-table-column label="id" prop="id" width="80"></el-table-column>
                            <el-table-column label="合同号" prop="factory_contract_no" width="170"></el-table-column>
                            <el-table-column label="款号" prop="type_no" width="120"></el-table-column>
                            <el-table-column label="违约赔偿" prop="amount"></el-table-column>
                            <el-table-column label="赔偿原因" prop="reason"></el-table-column>
                            <el-table-column label="备注" prop="remarks" show-overflow-tooltip></el-table-column>
                            <el-table-column label="赔偿申请日期" prop="createtime" width="135"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <div style="margin-top: 20px;">
                        <svg t="1717659283335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9445" width="16" height="16"><path d="M407.466667 477.866667h-277.333334C93.866667 477.866667 64 448 64 409.6v-277.333333c0-36.266667 29.866667-66.133333 66.133333-66.133334h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133334v277.333333c2.133333 38.4-27.733333 68.266667-66.133333 68.266667zM132.266667 108.8c-12.8 0-25.6 10.666667-25.6 25.6v277.333333c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333333c0-12.8-10.666667-25.6-25.6-25.6h-277.333333zM407.466667 960h-277.333334C93.866667 960 64 930.133333 64 893.866667v-277.333334c0-36.266667 29.866667-66.133333 66.133333-66.133333h277.333334c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM132.266667 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z m618.666666-110.933333c-17.066667 0-34.133333-6.4-46.933333-19.2L563.2 320c-12.8-12.8-19.2-29.866667-19.2-46.933333s6.4-34.133333 19.2-46.933334L704 83.2c12.8-12.8 29.866667-19.2 46.933333-19.2 17.066667 0 34.133333 6.4 46.933334 19.2l140.8 140.8c12.8 12.8 19.2 29.866667 19.2 46.933333 0 17.066667-6.4 34.133333-19.2 46.933334l-138.666667 142.933333c-12.8 12.8-29.866667 19.2-49.066667 19.2z m0-373.333333c-6.4 0-12.8 2.133333-17.066666 6.4l-140.8 140.8c-4.266667 4.266667-6.4 10.666667-6.4 17.066666 0 6.4 2.133333 12.8 6.4 17.066667l140.8 140.8c4.266667 4.266667 10.666667 6.4 17.066666 6.4 6.4 0 12.8-2.133333 17.066667-6.4l140.8-140.8c4.266667-4.266667 6.4-10.666667 6.4-17.066667 0-6.4-2.133333-12.8-6.4-17.066666L768 113.066667c-4.266667-4.266667-8.533333-6.4-17.066667-6.4z m138.666667 853.333333h-277.333333c-36.266667 0-66.133333-29.866667-66.133334-66.133333v-277.333334c0-36.266667 29.866667-66.133333 66.133334-66.133333h277.333333c36.266667 0 66.133333 29.866667 66.133333 66.133333v277.333334c2.133333 36.266667-27.733333 66.133333-66.133333 66.133333zM614.4 590.933333c-12.8 0-25.6 10.666667-25.6 25.6v277.333334c0 12.8 10.666667 25.6 25.6 25.6h277.333333c12.8 0 25.6-10.666667 25.6-25.6v-277.333334c0-12.8-10.666667-25.6-25.6-25.6h-277.333333z" fill="#1E87EB" p-id="9446"></path></svg>
                        <span style="font-size: 16px;font-weight: bold;vertical-align: bottom;margin-left: 4px;">已完成对账信息</span>
                    </div>
                    <el-table :data="reconciliation.info" size="mini" border :header-cell-style="{ background: '#F3F4F7', color: '#555' }" style="width: 99%;">
                        <el-table-column label="货款金额" prop="purchasein_amount"></el-table-column>
                        <el-table-column label="额外费用" prop="additional_amount"></el-table-column>
                        <el-table-column label="违约赔偿" prop="fine_amount"></el-table-column>
                        <el-table-column label="总开票金额" prop="kaip_amount"></el-table-column>
                        <el-table-column label="总应付金额" prop="pay_amount"></el-table-column>
                    </el-table>
                </el-tabs>
            </el-row>
            <div style="width: 100%;position: absolute;bottom: 10px;padding: 8px;border-top: 1px #ebeef5 solid;">
                <el-button type="primary" @click="saveNextBtn" plain :disabled="selectedData.length==0" :loading="saveLoading">保存并进入下一步</el-button>
                <el-button type="success" @click="finishBtn" plain v-if="!!reconciliation.id" :loading="saveLoading">确认对账单</el-button>
            </div>
        </el-drawer>
    </section>
</template>

<script>

import {factoryList} from "@/api/produce/factory";
import {formatDate} from "@/libs/tools";
import {
    reconciliationCancel, reconciliationCheck, reconciliationDetail, reconciliationFinish,
    reconciliationList,
    reconciliationPay,
    reconciliationPush, reconciliationSave
} from "@/api/soa/reconciliation";
import {getToken} from "@/libs/util";
import {cyStatisticList} from "@/api/soa/cyStatistic";
import {extraList} from "@/api/soa/extra";
import {fineList} from "@/api/soa/fine";

export default {
    name: "soa_xh_manage",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            saveLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            searchLoading: false,
            form: {supplier_id: "",recon_time: formatDate(new Date().getTime(), "last_month"), status: 0, pay_status: "", is_push: "" },
            factoryList: [],

            selectedId: "",
            payImages: [],
            payVisible: false,
            uploadHeaders: {},
            uploadData:{type: 'soa_xh_manage', disk: 'image'},

            checkVisible: false,
            checkStatus: 1,

            drawHeight: window.innerHeight - 150+"px",
            maxTableHeight: window.innerHeight - 410+"px",
            detailVisible: false,
            detail: {list: [], additional_list: [], fine_list: [], info: [], bank: []},

            editTitle: "创建对账单--绣花",
            editVisible: false,
            checkBStatus: true,//合同未签署是否继续创建对账单
            tab: "return",
            editForm: {embroidery_factory_id: "", date: formatDate(new Date().getTime(), "last_month"), brand_code: ""},
            reconciliation: {list: [], additional_list: [], fine_list: [], info: [], bank: []},
            returnLoading: false,
            additionalLoading: false,
            fineLoading: false,
            returnList: [],
            additionalList: [],
            fineList: [],
            selectedData: [],
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
        if(this.user.source_from == 'gc'){//用户来源：工厂
            this.form.supplier_id = this.user.supplier_id;
            this.form.status = 1;
        }
    },
    methods: {
        //搜索加工厂
        searchFactoryBtn(val){
            if(val == ""){
                return;
            }
            this.getFactoryData(val);
        },
        getFactoryData(name){
            factoryList({page: 1, limit: 100, tab: 2, factory_name: name, status: 0}).then((res) =>{
                this.factoryList = res.data.data;
            })
        },
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit,
                type: 1,
            };
            param = Object.assign(param, this.form);
            this.loading = true;
            reconciliationList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        closeBtn(){
            this.checkStatus = 1;
            this.tab = "return";
            this.selectedId = "";
            this.payImages = [];
            this.returnList = [];
            this.additionalList = [];
            this.fineList = [];
            this.selectedData = [];
            this.editForm = {embroidery_factory_id: "", date: formatDate(new Date().getTime(), "last_month"), brand_code: ""};
            this.detail = {list: [], additional_list: [], fine_list: [], info: [], bank: []};
            this.reconciliation = {list: [], additional_list: [], fine_list: [], info: [], bank: []};
            this.detailVisible = false;
            this.payVisible = false;
            this.checkVisible = false;
            this.editVisible = false;
        },
        //创建按钮
        addBtn(){
            this.editVisible = true;
            this.editTitle = "创建对账单--绣花";
        },
        selectable(row, index){
            if(row.status !== 2){
                return false;
            }
            return true;
        },
        //详情
        detailBtn(id){
            this.loading = true;
            reconciliationDetail({id: id}).then((res) =>{
                this.loading = false;
                this.detail = res.data;
                this.detailVisible = true;
            }).catch(() =>{
                this.loading = false;
            })
        },
        //勾选数据
        selectedChange(list){
            this.selectedData = list;
        },
        //重新选择
        reselectBtn(){
            if(this.tab == 'return'){
                this.$set(this.reconciliation, 'list', []);
                this.getReturnsData();
            }
            if(this.tab == 'additional'){
                this.$set(this.reconciliation, 'additional_list', []);
                this.getAdditionalData();
            }
            if(this.tab == 'fine'){
                this.$set(this.reconciliation, 'fine_list', []);
                this.getFineData();
            }
        },
        //加载统计数据
        loopData(){
            if(!this.editForm.embroidery_factory_id || !this.editForm.brand_code || !this.editForm.date){
                return;
            }
            this.getReturnsData();
            this.getAdditionalData();
            this.getFineData();
        },
        //获取回货统计数据
        getReturnsData(){
            this.returnLoading = true;
            let param = Object.assign({page: 1, limit: 10000, exclude_fc: 1}, this.editForm)
            cyStatisticList(param).then((res) =>{
                this.returnLoading = false;
                this.returnList = res.data.data;
            }).catch(()=>{
                this.returnLoading = false;
            })
        },
        //获取额外费用数据
        getAdditionalData(){
            this.additionalLoading = true;
            let param = Object.assign({page: 1, limit: 10000}, {k_status: 0, status: 1, supplier_id: this.editForm.embroidery_factory_id});
            extraList(param).then((res) =>{
                this.additionalLoading = false;
                this.additionalList = res.data.data;
            }).catch(()=>{
                this.additionalLoading = false;
            })
        },
        //获取违约赔偿数据
        getFineData(){
            this.fineLoading = true;
            let param = Object.assign({page: 1, limit: 10000}, {k_status: 0, status: 1, supplier_id: this.editForm.embroidery_factory_id});
            fineList(param).then((res) =>{
                this.fineLoading = false;
                this.fineList = res.data.data;
            }).catch(()=>{
                this.fineLoading = false;
            })
        },
        //保存并下一步
        saveNextBtn(){
            this.saveLoading = true;
            let obj = {
                id: this.reconciliation.id,
                tab: this.tab,
                checkBStatus: this.checkBStatus,
                selectedIds: [],
                type: 1,//0 成衣 1 绣花
                supplier_id: this.editForm.embroidery_factory_id,
                date: this.editForm.date,
                brand_code: this.editForm.brand_code
            };
            this.selectedData.forEach(item =>{
                obj.selectedIds.push(item.id);
            })
            obj.selectedIds = JSON.stringify(obj.selectedIds);
            this.saveLoading = true;
            reconciliationSave(obj).then((res) =>{
                this.saveLoading = false;
                if(res.code === 0) {
                    this.checkBStatus = true;
                    this.selectedData = [];
                    this.reconciliation = res.data;
                    if (this.tab == 'return') {
                        this.$message.success("对账单保存成功, 请操作下一步");
                        this.tab = "additional";
                        this.returnList = res.data.list;
                    } else if(this.tab == 'additional'){
                        this.$message.success("额外费用保存成功, 请操作下一步");
                        this.tab = "fine";
                        this.additionalList = res.data.additional_list;
                    } else if(this.tab == 'fine'){
                        this.$message.success("违约赔偿保存成功");
                        this.fineList = res.data.fine_list;
                    }
                }else {
                    //创建对账单
                    if(this.tab == 'return'){
                        this.$confirm(res.msg+", 请确认是否继续?", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        }).then(() => {
                            this.checkBStatus = false;
                            this.saveNextBtn();
                        }).catch(()=>{

                        });
                    }else{
                        this.$message.error(res.msg);
                    }
                }
            }).catch(() =>{
                this.saveLoading = false;
            })
        },
        //确认对账单
        finishBtn(){
            this.saveLoading = true;
            reconciliationFinish({id: this.reconciliation.id}).then((res) =>{
                this.saveLoading = false;
                if(res.code === 0){
                    this.$message.success("对账单已完成, 请进行审核");
                    this.closeBtn();
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.saveLoading = false;
            })
        },
        //操作按钮
        dropdownBtn(command, row){
            switch (command){
                case "EDIT":
                    this.loading = true;
                    reconciliationDetail({id: row.id}).then((res) =>{
                        this.loading = false;
                        this.editTitle = "修改对账单--绣花";
                        this.editVisible = true;
                        this.reconciliation = res.data;
                        this.returnList = res.data.list;
                        this.additionalList = res.data.additional_list;
                        this.fineList = res.data.fine_list;
                        this.editForm = {embroidery_factory_id: res.data.supplier_id, date: res.data.recon_time, brand_code: res.data.brand_code};
                        if(this.reconciliation.additional_list.length == 0){
                            this.getAdditionalData();
                        }
                        if(this.reconciliation.fine_list.length == 0){
                            this.getFineData();
                        }
                    }).catch(() =>{
                        this.loading = false;
                    })
                    break;
                case "CHECK":
                    this.selectedId = row.id;
                    this.checkVisible = true;
                    break;
                case "PAY":
                    this.selectedId = row.id;
                    this.payVisible = true;
                    break;
                case "PUSH":
                    this.$confirm("【绣花对账单】推送金蝶, 请确认数据是否正确?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        this.loading = true;
                        reconciliationPush({id: row.id, type: 1}).then((res) =>{
                            this.loading = false;
                            if(res.code === 0){
                                this.$message.success("推送金蝶成功");
                                this.getData();
                            }else{
                                this.$message.error(res.msg);
                            }
                        }).catch(()=>{
                            this.loading = false;
                        })
                    }).catch(() => {

                    });
                    break;
                case "CANCEL":
                    this.$confirm("此操作将永久作废该对账单, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        this.loading = true;
                        reconciliationCancel({id: row.id}).then((res) =>{
                            this.loading = false;
                            if(res.code === 0){
                                this.$message.success("作废成功");
                                this.getData();
                            }else{
                                this.$message.error(res.msg);
                            }
                        }).catch(()=>{
                            this.loading = false;
                        })
                    }).catch(() => {

                    });
                    break;
            }
        },
        submitPayImagesBtn(){
            if(this.payImages.length==0 || !this.selectedId){
                this.$message.warning("请上传图片");
                return;
            }
            let images = [];
            this.payImages.forEach(item => {
                images.push(item.response.data);
            });
            this.saveLoading = true;
            reconciliationPay({id: this.selectedId, images: images}).then((res) =>{
                this.saveLoading = false;
                if(res.code === 0){
                    this.$message.success("付款凭证上传成功");
                    this.closeBtn();
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.saveLoading = false;
            })
        },
        submitCheckBtn(){
            this.saveLoading = true;
            reconciliationCheck({id: this.selectedId, status: this.checkStatus}).then((res) =>{
                this.saveLoading = false;
                if(res.code === 0){
                    this.$message.success("操作成功");
                    this.closeBtn();
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.saveLoading = false;
            })
        },
        //导出pdf
        downloadPdfBtn(id){
            this.$confirm("导出pdf, 是否继续？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                window.open(`/api/tool/fileExport?type=pdf&name=对账单&path=${id}`, "_blank");
            }).catch(()=>{

            })
        },
        //导出excel
        downloadExcelBtn(id){
            this.$confirm("导出excel, 是否继续？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                window.open(`/api/tool/fileExport?type=excel&name=对账单&path=${id}`, "_self");
            }).catch(() => {

            })
        },

        //删除图片
        delImgBtn(file){
            let index;
            for(let i in this.payImages){
                if(this.payImages[i].uid == file.uid){
                    index = i;
                    break;
                }
            }
            if(index != undefined){
                this.payImages.splice(index, 1);
            }
        },
        //上传之前的检测
        beforeUploadHandle(file) {
            if(!['image/jpg','image/jpeg','image/png'].includes(file.type)){
                this.$message.error('上传图片只能是 jpg、png 格式!');
                return false;
            }
            this.uploadHeaders.Authorization = 'Bearer '+ getToken();
            return true;
        },
        //上传成功
        uploadSuccessHandle(res, fileList) {
            if(res.code === 0){
                this.payImages = fileList
            }else{
                this.$message.error("上传失败");
                fileList = fileList.filter(item => item.response && item.response.code === 0);
                this.payImages = fileList;
            }
        },
    },
    mounted() {
        this.getFactoryData("");
        this.searchBtn();
    }
}
</script>

<style scoped>
.el-image /deep/ .el-icon-circle-close:before{
    color: white;
}
</style>
